import React, { useState, useEffect } from 'react';
import { Tooltip } from 'antd';
import IconFont from '@/components/IconFont';
import cn from 'classnames';
import { size, get } from 'lodash';
import { history } from 'umi'
import { useRequest, defaultFormatResult } from '@/hooks';
import { eventTrack } from '@/utils/track';
import { queryEmployeeCountStatistical, queryEntryNumber } from '../../services';
import styles from './index.less';
// 员工工作性质和状态过滤Card
const WorkTypeCard = ({ data, onChange }) => {
    const [activeBox, setActiveBox] = useState('work');
    const [active, setActive] = useState('');

    const { data: tableData } = useRequest(queryEmployeeCountStatistical, {
        ...defaultFormatResult
    });

    const { data: entryNumberData } = useRequest(queryEntryNumber, {
        ...defaultFormatResult
    });

    // 注意：当前需求是这三种状态是互斥的一定不能同时存在，如果后期要改成可以同时存在需要去修改逻辑
    useEffect(() => {
        if (size(data) > 0) {
            // 工作性质、岗位类型、员工状态
            let tempBox = 'work';
            let tempActive = '';
            const { workNature, dutyType, employeeServiceStatus } = data;

            if (size(workNature) > 0) {
                tempActive = workNature;
            }
            // 兼任
            if (size(dutyType) > 0 || dutyType === 0) {
                tempActive = 'duty';
            }
            // 员工状态有值显示状态box
            if (size(employeeServiceStatus) > 0 || employeeServiceStatus > 0) {
                tempBox = 'status';
                tempActive = `status_${employeeServiceStatus}`;
            }
            setActive(tempActive);
            setActiveBox(tempBox);
        }
    }, [data]);

    // 点击相应类型
    const handleClick = (type, value) => {
        const obj = {};
        switch (type) {
            case 'workNature':
                obj.workNature = value;
                obj.dutyType = '';
                obj.employeeServiceStatus = '';
                break;
            case 'dutyType':
                obj.workNature = '';
                obj.dutyType = value;
                obj.employeeServiceStatus = '';
                break;
            case 'employeeServiceStatus':
                obj.workNature = '';
                obj.dutyType = '';
                obj.employeeServiceStatus = value;
                break;
            default:
                break;
        }
        if (onChange) {
            onChange(obj);
        }
    };

    const handleWorkClick = e => {
        handleClick('workNature', e);
    };
    const handleDutyClick = () => {
        handleClick('dutyType', 0);
    };
    const handleStatusClick = e => {
        handleClick('employeeServiceStatus', e);
    };

    return (
        <div className={styles.workTypeCardWrapper}>
            <div className={styles.leftBar}>
                <div className={cn(styles.workNatureBox, styles.box, activeBox === 'work' && styles.activeBox)}>
                    <ul
                        className={cn(styles.statistic, size(active) === 0 && styles.active)}
                        onClick={() => {
                            handleWorkClick('');
                            eventTrack({
                                eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                                pageName: 'personnel_management_organization',
                                eventProps: {
                                    click_context: `在职员工-${get(tableData, 'all_employee', '0')}`
                                }
                            });
                        }}
                    >
                        <li>
                            <Tooltip
                                placement="topLeft"
                                getPopupContainer={triggerNode => triggerNode.parentElement}
                                title={
                                    <div>
                                        在职员工=全职+实习+兼职+顾问+临时工（工作性质）
                                        <br />
                                        在职员工=正式+试用+待离职+非正式（工作状态）
                                    </div>
                                }
                            >
                                在职员工
                                <IconFont icon="info-circle" style={{ marginLeft: 5, fontSize: 12 }} />
                            </Tooltip>
                        </li>
                        <li>{get(tableData, 'all_employee', '0')}</li>
                    </ul>
                    <ul
                        className={cn(styles.statistic, active === 'full_time' && styles.active)}
                        onClick={() => {
                            handleWorkClick('full_time');
                            eventTrack({
                                eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                                pageName: 'personnel_management_organization',
                                eventProps: {
                                    click_context: `全职-${get(tableData, 'full_time', '0')}`
                                }
                            });
                        }}
                    >
                        <li>全职</li>
                        <li>{get(tableData, 'full_time', '0')}</li>
                    </ul>
                    <ul
                        className={cn(styles.statistic, active === 'practice' && styles.active)}
                        onClick={() => {
                            handleWorkClick('practice');
                            eventTrack({
                                eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                                pageName: 'personnel_management_organization',
                                eventProps: {
                                    click_context: `实习-${get(tableData, 'practice', '0')}`
                                }
                            });
                        }}
                    >
                        <li>实习</li>
                        <li>{get(tableData, 'practice', '0')}</li>
                    </ul>
                    <ul
                        className={cn(styles.statistic, active === 'part_time' && styles.active)}
                        onClick={() => {
                            handleWorkClick('part_time');
                            eventTrack({
                                eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                                pageName: 'personnel_management_organization',
                                eventProps: {
                                    click_context: `兼职-${get(tableData, 'part_time', '0')}`
                                }
                            });
                        }}
                    >
                        <li>兼职</li>
                        <li>{get(tableData, 'part_time', '0')}</li>
                    </ul>
                    <ul
                        className={cn(styles.statistic, active === 'consultant' && styles.active)}
                        onClick={() => {
                            handleWorkClick('consultant');
                            eventTrack({
                                eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                                pageName: 'personnel_management_organization',
                                eventProps: {
                                    click_context: `顾问-${get(tableData, 'consultant', '0')}`
                                }
                            });
                        }}
                    >
                        <li>顾问</li>
                        <li>{get(tableData, 'consultant', '0')}</li>
                    </ul>
                    <ul
                        className={cn(styles.statistic, active === 'temporary' && styles.active)}
                        onClick={() => {
                            handleWorkClick('temporary');
                            eventTrack({
                                eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                                pageName: 'personnel_management_organization',
                                eventProps: {
                                    click_context: `临时工-${get(tableData, 'temporary', '0')}`
                                }
                            });
                        }}
                    >
                        <li>临时工</li>
                        <li>{get(tableData, 'temporary', '0')}</li>
                    </ul>
                    <ul
                        className={cn(styles.statistic, active === 'duty' && styles.active)}
                        onClick={() => {
                            handleDutyClick();
                            eventTrack({
                                eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                                pageName: 'personnel_management_organization',
                                eventProps: {
                                    click_context: `兼任-${get(tableData, 'more_part', '0')}`
                                }
                            });
                        }}
                    >
                        <li>兼任</li>
                        <li>{get(tableData, 'more_part', '0')}</li>
                    </ul>
                </div>

                <div className={cn(styles.box, activeBox === 'status' && styles.activeBox)}>
                    <ul
                        className={cn(styles.statistic, active === 'status_1' && styles.active)}
                        onClick={() => {
                            handleStatusClick(1);
                            eventTrack({
                                eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                                pageName: 'personnel_management_organization',
                                eventProps: {
                                    click_context: `正式-${get(tableData, '1', '0')}`
                                }
                            });
                        }}
                    >
                        <li>正式</li>
                        <li>{get(tableData, '1', '0')}</li>
                    </ul>
                    <ul
                        className={cn(styles.statistic, active === 'status_4' && styles.active)}
                        onClick={() => {
                            handleStatusClick(4);
                            eventTrack({
                                eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                                pageName: 'personnel_management_organization',
                                eventProps: {
                                    click_context: `试用-${get(tableData, '4', '0')}`
                                }
                            });
                        }}
                    >
                        <li>试用</li>
                        <li>{get(tableData, '4', '0')}</li>
                    </ul>
                    <ul
                        className={cn(styles.statistic, active === 'status_5' && styles.active)}
                        onClick={() => {
                            handleStatusClick(5);
                            eventTrack({
                                eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                                pageName: 'personnel_management_organization',
                                eventProps: {
                                    click_context: `待离职-${get(tableData, '5', '0')}`
                                }
                            });
                        }}
                    >
                        <li>待离职</li>
                        <li>{get(tableData, '5', '0')}</li>
                    </ul>
                    <ul
                        className={cn(styles.statistic, active === 'status_9' && styles.active)}
                        onClick={() => {
                            handleStatusClick(9);
                            eventTrack({
                                eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                                pageName: 'personnel_management_organization',
                                eventProps: {
                                    click_context: `非正式-${get(tableData, '9', '0')}`
                                }
                            });
                        }}
                    >
                        <li>非正式</li>
                        <li>{get(tableData, '9', '0')}</li>
                    </ul>
                </div>
            </div>

            <div className={styles.rigthBar}>
                <div
                    className={cn(styles.box, styles.entry)}
                    onClick={async () => {
                        await eventTrack({
                            eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                            pageName: 'personnel_management_organization',
                            eventProps: {
                                click_context: `待入职-${entryNumberData || 0}`
                            }
                        });
                        history.push({
                            pathname: '/office/personnelManagement/onboardAndLeave/entryManage/waitEntry',
                            state: { tabRoute: true, tabRefresh: true }
                        });
                    }}
                >
                    <ul className={styles.statistic}>
                        <li>待入职</li>
                        <li>{entryNumberData || 0}</li>
                    </ul>
                    <IconFont icon="icondairuzhiPic" className={styles.iconBg} />
                </div>
                {/* <div
                    className={cn(styles.box, styles.leave)}
                    onClick={async () => {
                        await eventTrack({
                            eventName: 'personnel_management_organization_employee_list_worktype_card_click',
                            pageName: 'personnel_management_organization',
                            eventProps: {
                                click_context: `已离职-${get(tableData, '6', '0')}`
                            }
                        });
                        history.push({
                            pathname: '/office/personnelManagement/onboardAndLeave/historicalRecords',
                            state: { tabRoute: true, tabRefresh: true }
                        });
                    }}
                >
                    <ul className={styles.statistic}>
                        <li>已离职</li>
                        <li>{get(tableData, '6', '0')}</li>
                    </ul>
                    <IconFont icon="iconyilizhiPic" className={styles.iconBg} />
                </div> */}
            </div>
        </div>
    );
};

export default WorkTypeCard;
